<template>
	<view class="container">
		<view class="avatar">
			<image src="/static/images/avatar.png"></image>
		</view>

		<view class="form">
			<u--form labelPosition="left" :model="business" :rules="rules" ref="uForm">

				<u-form-item label="手机" prop="mobile" borderBottom>
					<u--input v-model="business.mobile" border="none" placeholder="请输入手机号"></u--input>
				</u-form-item>

				<u-form-item label="密码" prop="password" borderBottom>
					<u--input type="password" v-model="business.password" border="none" placeholder="请输入密码"></u--input>
				</u-form-item>

				<view style="margin-top: 25px;">
					<u-button type="warning" @click="submit">登录注册</u-button>
				</view>

				<view class="btn" @click="ToRegister">
					首页
					<u-icon name="arrow-rightward"></u-icon>
				</view>
			</u--form>
		</view>
		<!-- 信息提示 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>
<script>
	export default {
		data() 
		{
			return {
				business: {
					mobile: '',
					password: ''
				},
				rules: {}
			}
		},
		methods: {
			async submit() {
				let result = await this.$u.api.login({
					mobile: this.business.mobile,
					password: this.business.password
				})
				if (result.code == 1) {
					uni.setStorageSync('business', result.data);
					this.$refs.uToast.show({
						type: 'success',
						message: result.msg,
						complete: () => {
							uni.navigateTo({
								url: '/pages/business/index'
							});
						}
					})
				} else {
					this.$refs.uToast.show({
						message: result.msg,
						type: 'error',
					})
				}
			},
			ToRegister() {
				uni.reLaunch({
					url: '/pages/validate/validate'
				});
			}
		},
	}
</script>

<style>
	page {
		background-color: #f8fafe;
	}

	.container .avatar {
		text-align: center;
		background-color: #fff;
	}

	.avatar image {
		width: 120px;
		height: 120px;
		margin: 50px 0;
		border-radius: 50%;
	}

	.form {
		margin: 0 50rpx;
		box-sizing: border-box;
	}

	.btn {
		margin-top: 25px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.u-icon {
		margin-left: 10px;
	}
</style>